<template>
  <div>
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
        <div v-for="(item,index) in data" :key="index">
            <slot :data="item"></slot>
        </div>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import Vue, { reactive } from "vue";
type names = {
    name:string,
    age:number
}
const data = reactive<names[]>([{
    name:'插入1',
    age:20
},{
    name:'插入2',
    age:21
},{
    name:'插入3',
    age:22
}])
</script>

<style lang="less" scoped>
.header {
  height: 200px;
  background: red;
  color: #fff;
}
.main {
  height: 300px;
  background: green;
  color: #fff;
}
.footer {
  height: 200px;
  background: blue;
  color: #fff;
}
</style>
